<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>人机交互推荐系统展示页面</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>{{ book_title }}</b></div>
            <div class="card-body" style="font-size: large;">交互评分：{{ show_info['total']['score'] }}</div>
            <div class="card-footer" style="font-size: larger;color: brown;"><b>{{ show_info['total']['text'] }}</b>
            </div>
        </div>
    </div>
    {% if 'reader' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>进入阅读器评分：{{ show_info['reader']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['reader']['text'] }}</div>
        </div>
    </div>
    {% endif %}
    {% if 'stay' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>停留在推荐页面评分：{{ show_info['stay']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['stay']['text'] }}</div>
        </div>
    </div>
    {% endif %}
    {% if 'info' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>进入书籍详情评分：{{ show_info['info']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['info']['text'] }}</div>
        </div>
    </div>
    {% endif %}
    {% if 'speed' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>阅读滑动评分：{{ show_info['speed']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['speed']['text'] }}</div>
        </div>
    </div>
    {% endif %}
    {% if 'rate' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>用户评分：{{ show_info['rate']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['rate']['text'] }}</div>
        </div>
    </div>
    {% endif %}
    {% if 'zan' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>用户点赞评分：{{ show_info['zan']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['zan']['text'] }}</div>
        </div>
    </div>
    {% elif 'cai' in show_info %}
    <div class="card" style="margin: 20pt; border-radius: 10pt;">
        <div class="span12">
            <div class="card-header" style="font-size: larger;"><b>用户点踩评分：{{ show_info['cai']['score'] }}</b></div>
            <div class="card-body" style="font-size: large;">{{ show_info['cai']['text'] }}</div>
        </div>
    </div>
    {% endif %}
</body>

</html>